<template>
  <div class="backend-detail">
    <div class="detail-info">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>组织详情</span>
          </div>
        </template>

        <div v-loading="loading">
          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">姓名：</el-col>
            <el-col :span="20">{{ departDetail.name }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">账号：</el-col>
            <el-col :span="20">{{ departDetail.departCount }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">邮箱：</el-col>
            <el-col :span="20">{{ departDetail.zhuchiren }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">员工类型：</el-col>
            <el-col :span="20">{{ departDetail.fayanren }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">状态：</el-col>
            <el-col :span="20">{{ departDetail.departTime }}</el-col>
          </el-row>
          
        </div>
      </el-card>
    </div>

    <div class="detail-opera">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>控制面板</span>
          </div>
        </template>

        <div class="opera-button">
          <el-dropdown>
            <el-button type="primary" circle>
              <el-icon ><More /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="editMember">编辑</el-dropdown-item>
                <el-dropdown-item @click="deleteMember">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default { name: 'backendLearnDepartDetail' }
</script>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { More } from "@element-plus/icons-vue";
import tEditor from "@/components/tinymceEditor/tEditor.vue"

/* 路由 */
const route = useRouter()

onMounted(() => {
  console.log(route.currentRoute.value.query)
})

/* 详情数据加载动画 */
const loading = ref(false)

/* 详情内容 */
const departDetail = reactive({
  id: 1,
  name: "张三",
  departCount: "12345",
  zhuchiren: "1395552075@qq.com",
  fayanren: "类型1",
  departTime: "启用",
})

/* 点击编辑 */
const editMember = () => {
  console.log("点击编辑")
  route.push({
    path: "/backend/system-depart/add",
    query: { id: route.currentRoute.value.query.id, type: 'edit' }
  })
}

/* 点击删除 */
const deleteMember = () => {
  ElMessageBox.confirm(
    '确定要删除此条数据吗？',
    '请确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    return 
    http.$POST(`/PreachM/DelPreachTeamById?Id=${route.currentRoute.value.query.id}`).then(res => {
      if (res.IsError) {
        ElMessage({
          type: 'warning',
          message: '操作失败',
        })
      }else {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        route.push({
          path: "/backend/system-depart"
        })
      }
    }).catch(err => {
      ElMessage.warning("操作失败")
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}

</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
</style>